<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="./layui/css/layui.css">
    <meta charset="UTF-8">
    <title>宠雨秒杀</title>
</head>
<body style="background-color: #F6F6F6;">

    <script src="https://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/jquerysession.js"></script>
    <script src="./layui/layui.all.js"></script>



    		<!-- 导航栏 -->
		<div class="layui-layout layui-layout-admin">
			<div class="layui-header">
				<!-- 设置logo -->
				<div class="layui-logo">
					<a style="color: dodgerblue;" href="main.html">ChongYu SeckKill</a>
				</div>
				<!-- 左边导航栏 -->
				<ul class="layui-nav layui-layout-left">
					<li class="layui-nav-item">
						<a href="main.html">首页</a>
					</li>
					<li class="layui-nav-item">
						<a href="main.html">全部商品</a>
					</li>
					<li class="layui-nav-item">
						<a href="">正在抢购</a>
					</li>
					<li class="layui-nav-item">
						<a href="">预热商品</a>
					</li>
				</ul>
				<!-- 右边导航栏 -->
				<ul id="view" class="layui-nav layui-layout-right">
					<li class="layui-nav-item">
						<a href="index.html">立即登录</a>
					</li>
				</ul>
			</div>
		</div>

    <!-- 生成替换模板 -->
		<script id="user" type="text/html">
		 <li class="layui-nav-item">
			 <a>欢迎您: {{d.name}}</a>
		 </li>
		 <li class="layui-nav-item">
			 <a href="person.html">个人中心</a>
		 </li>
		  <li class="layui-nav-item">
			  <a onclick="loginout()">注销退出</a>
		  </li>
		</script>

		<!-- 配置导航栏信息 -->
		<script>
			function loginout() {
				$.session.clear();
				window.location.href = 'main.html';
			}

			$(toview())


			function toview() {
				//第三步：渲染模版
				var laytpl = layui.laytpl;

				var getTpl = user.innerHTML,
					view = document.getElementById('view'),
					data = $.session.get("user");

				if (data != null) {
					laytpl(getTpl).render(JSON.parse(data), function(html) {
						view.innerHTML = html;
					});
				}
			}
		</script>



    <!-- 主界面 -->
    <div style="background-color: #eeeeee;margin-top:70px;margin-left:150px;margin-right: 150px;" id="productinfo" class="layui-row layui-col-space15">
        <div>
            <div class="layui-row">
              <div id="productimg" style="text-align: center;" class="layui-col-md7">
              </div>
              <div id="productcontent" class="layui-col-md5">
              </div>
            </div>
        </div>
    </div>

    <script>
        /***
         * html:<img src="img/1.jpg" onclick="showimg('img/1.jpg');">
          * 图片弹出展示,默认原大小展示。图片大于浏览器时下窗口可视区域时，进行等比例缩小。
         * src 图片路径。必须项
         * imgHeight 图片显示高度，默认原大小展示。图片大于浏览器时下窗口可视区域时，进行等比例缩小。
         * imgWidth 图片显示宽度，默认原大小展示。图片大于浏览器时下窗口可视区域时，进行等比例缩小。
         */
        
        function showimg(src) {
            if (src || src == "") {
                layer.msg("没有发现图片！");
                return;
            }
            var img = new Image();
            img.onload = function () {//避免图片还未加载完成无法获取到图片的大小。
                //避免图片太大，导致弹出展示超出了网页显示访问，所以图片大于浏览器时下窗口可视区域时，进行等比例缩小。
                var max_height = $(window).height() - 100;
                var max_width = $(window).width();
        
                //rate1，rate2，rate3 三个比例中取最小的。
                var rate1 = max_height / img.height;
                var rate2 = max_width / img.width;
                var rate3 = 1;
                var rate = Math.min(rate1, rate2, rate3);
                //等比例缩放
                var imgHeight = img.height * rate; //获取图片高度
                var imgWidth = img.width * rate; //获取图片宽度
        
                var imgHtml = "<img src='" + src + "' width='" + imgWidth + "px' height='" + imgHeight + "px'/>";
                //弹出层
                layer.open({
                    type: 1,
                    title: false,//不显示标题
                    closeBtn: 0,
                    area: ['auto', 'auto'],
                    skin: 'layui-layer-nobg', //没有背景色
                    shadeClose: true,
                    content: imgHtml
                });
            }
            img.src = src;
        }
    </script>


    <!-- 商品具体信息模板 -->
    <script id="contentimg" type="text/html">
        <img style="object-fit: contain;width: 640px;height: 350px;margin-top: 20px;margin-bottom: 20px;" src={{d.img}}>
    </script>

    <script id="contentinfo" type="text/html">
        <div style="margin-top: 15px;text-align: center;">
            <h1>{{d.name}}</h1>
        </div>
        <div style="margin-top: 10px;margin-left: 30px;color: crimson;">
            <h2 id="showtime"></h2>
        </div>
        <div style="margin-top: 20px;height: 100px;margin-left: 30px;margin-right: 30px;background-color: #e2e2e2;">
            <h2>{{d.describe}}</h2>
        </div>
        <div style="margin-top: 15px;margin-left: 30px;">
            <h2>单价: {{d.price}} ¥</h2>
        </div>
        <div style="margin-top: 15px;margin-left: 30px;">
            <h2>库存: {{d.count}}</h2>
        </div>
        <div style="margin-top: 15px;margin-left: 30px;">
            <h2>已售: {{d.sale}}</h2>
        </div>
        <div id="productbutton" style="margin-top: 15px;margin-left: 30px;text-align: center;">
            <button type="button" onclick="goshopnow()" class="layui-btn">立即抢购</button>
        </div>
    </script>

    <!-- 时间控件 -->
    <script>
        var showtime = function (timetemp) {
            var nowtime = new Date(),  //获取当前时间
            timetemp = new Date(timetemp);  //定义结束时间
            var lefttime = timetemp.getTime() - nowtime.getTime(),  //距离结束时间的毫秒数
            leftd = Math.floor(lefttime/(1000*60*60*24)),  //计算天数
            lefth = Math.floor(lefttime/(1000*60*60)%24),  //计算小时数
            leftm = Math.floor(lefttime/(1000*60)%60),  //计算分钟数
            lefts = Math.floor(lefttime/1000%60);  //计算秒数
            return leftd + " 天 " + lefth + " 时 " + leftm + " 分 " + lefts + " 秒 ";  //返回倒计时的字符串
        }
    </script>

    <script>
        $(toview())

        function toview() {
            //第三步：渲染模版
            var laytpl = layui.laytpl;
            var getTpl = contentinfo.innerHTML;
            var view = document.getElementById('productcontent');
            var getTpl2 = contentimg.innerHTML;
            var productimg = document.getElementById('productimg');
            // 先获取商品的ID
            var result;
            var url = window.location.search;//获取url中“？”后面的字符串   
            if(url.length != -1){
                    result = url.substr(url.indexOf("=")+1);
            }

            // 去后端请求拿到商品的数据信息
            jQuery.ajax({
                type: "post",
                url: "/product/getone",
                data: {"id": result},
                dataType: "json",
                success: function(res){
                    if (res.data.code == 29){
                        var data = JSON.stringify(res.data.product);
                        laytpl(getTpl).render(JSON.parse(data), function(html) {
                            view.innerHTML = html;
                        });
                        laytpl(getTpl2).render(JSON.parse(data), function(html) {
                            productimg.innerHTML = html;
                        });
                        var startime = res.data.product.startTime;
                        var endtime = res.data.product.endTime;
                        // 创建日期对象
                        var nowDate = new Date();
                        var startDate = new Date(startime);
                        var endDate = new Date(endtime);
                        // 根据时间类定制时间滚动
                        var div = document.getElementById("showtime");
                        if( nowDate < startDate ){
                            document.getElementById("productbutton").remove();
                            // 抢购未开始
                            setInterval (function () {
                                div.innerHTML = "距开始抢购还有: "+showtime(startime);
                            }, 1000); //反复执行函数本身
                        }else if(nowDate >= startDate && nowDate < endDate){
                            // 抢购中
                            setInterval (function () {
                                div.innerHTML = "距抢购结束还有: "+showtime(endtime);
                            }, 1000); //反复执行函数本身
                        }else if( nowDate >= endDate ){
                            document.getElementById("productbutton").remove();
                            // 抢购已经结束
                            div.innerHTML = "抢购已结束!";
                        }

                    }
                },
                error: function(res){
                    alert("请求失败!");
                }
            });
            
        }
        </script>
    
    <script src="js/util.js"></script>
</body>
</html>